import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import React, { useState, useEffect } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import { html } from "./content-1";

export interface CustomerWangEditorProps {
  value?: string;
  onChange?: (value: string) => void;
}

// 编辑器内容
// 模拟 ajax 请求，异步设置 html
// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  // TS 语法
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      server: "/components/customer-wangEditor/upload",
      fieldName: "file",
    },
  },
};
export const CustomerWangEditor: React.FC<CustomerWangEditorProps> = ({
  value,
  onChange,
}) => {
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // 及时销毁 editor ，重要！
  useEffect(() => {
    if (editor) {
      editor.setHtml(html);
    }
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  return (
    <>
      <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: "1px solid #ccc" }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={value}
          onCreated={setEditor}
          onChange={(editor) => onChange?.(editor.getHtml())}
          mode="default"
          style={{ height: "500px", overflowY: "hidden" }}
        />
      </div>
    </>
  );
};

export default CustomerWangEditor;
